<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div id="title">
				<span class="title-text">{{ title }}</span>
			</div>
			<div class="MInfo">
				<div class="text">
					{{ captionA }}：
					<div style="font-size: 100%;color: rgb(7, 219, 255);padding-right: 2px;margin-top: 2%;">
						{{ Sum }}
					</div>
					<div style="font-size:100%;color: rgb(7, 219, 255);padding-right: 6px;">
						{{ Type }}
					</div>
				</div>
				<div class="text" id="B">
					{{ captionB }}：
					<div style="font-size: 100%;color: rgb(7, 219, 255);padding-right: 2px;margin-top: 3%;">
						{{ Amount }}
					</div>
					<div style="font-size: 100%;color: rgb(7, 219, 255);padding-right: 6px;">
						{{ Type }}
					</div>
				</div>
				<div class="text" id="C">
					{{ captionC }}：
					<div style="font-size: 100%;color: rgb(23, 157, 227);padding-right: 2px;margin-top: 3%;">
						{{ Offline }}
					</div>
					<div style="font-size: 100%;color: rgb(23, 157, 227);padding-right: 6px;">
						{{ Type }}
					</div>
				</div>
			</div>
			<div class="LInfo">
				<span style="color: #e8b601;font-size: 150%;margin-top: -2%;">{{ Amount }}</span>/{{ Sum }}
			</div>
		</div>
	</div>
</template>

<script>
	// import l from '../../assets/title.png'
	export default {
		name: "StableNormal",
		props: {
			title: String,
			captionA: String,
			captionB: String,
			captionC: String,
			Sum: Number,
			Amount: Number,
			Offline: Number,
			Type: String
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		margin-bottom: 5px;
		width: 100%;
		min-width: 2.96rem;
		height: 49%;
		margin-bottom: 2%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%;
		min-width: 2.96rem;
		height: 100%;
		background-image: url("../../assets/Panel@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 49%;
		height: 10%;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	.MInfo {
		display: flex;
		align-items: center;
		height: 50%;
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		justify-content: center;
	}

	.text {
		display: flex;
		align-items: center;
		// font-size: 24px;
		font-size: 21.59px;
		color: #fff;
	}

	#B::before {
		content: "-";
		transform: translate(-2px, 4px);
		color: rgba(255, 255, 255, 0);
		background-color: rgb(7, 219, 255);
		height: 90%; //9px;
		width: 3%;
		border-radius: 10px;
	}

	#C::before {
		content: ".";
		transform: translate(-2px, 4.35px);
		color: rgba(23, 156, 227, 0);
		background-color: rgb(23, 157, 227);
		height: 90%; //9px;
		width: 3%;
		border-radius: 10px;
	}

	.LInfo {
		font-size: 450%;
		color: #fff;
		height: 35%;
		margin-top: -5%;
		// background-color: red;
		// display: flex;
		align-items: flex-start;
		justify-content: center;
	}
</style>
